<template>

  <lay-container fluid="true" class="fly-container">

    <lay-card class="fly-search-card">
      <lay-form size="sm">
        <lay-form-item label="身份名称" prop="roleName" mode="inline">
          <lay-input v-model="queryUserRoleInfoParams.roleName"></lay-input>
        </lay-form-item>
        <lay-form-item label="主身份标志" prop="mainFlag" mode="inline">
          <lay-select v-model="queryUserRoleInfoParams.mainFlag">
            <lay-select-option value="" label="全部"></lay-select-option>
            <lay-select-option value="Y" label="是"></lay-select-option>
            <lay-select-option value="N" label="否"></lay-select-option>
          </lay-select>
        </lay-form-item>
        <lay-form-item label="有效标志" prop="validFlag" mode="inline">
          <lay-select v-model="queryUserRoleInfoParams.validFlag">
            <lay-select-option value="" label="全部"></lay-select-option>
            <lay-select-option value="Y" label="有效"></lay-select-option>
            <lay-select-option value="N" label="无效"></lay-select-option>
          </lay-select>
        </lay-form-item>

        <lay-button class="fly-button fly-button-search" size="sm"
                    @click=" reloadUserRoleInfoDate(1, flyLayPage.limit) ">
          <lay-icon class="layui-icon-search"></lay-icon>
          查询
        </lay-button>
      </lay-form>

    </lay-card>

    <div class="fly-table-box">
      <lay-table :page="false"
                 :skin="'line'"
                 size="sm"
                 :columns=" userRoleInfoColumns "
                 :loading=" tableUserRoleInfoData.loading "
                 :data-source=" tableUserRoleInfoData.rows "
                 @change=" reloadUserRoleInfoDate ">
      </lay-table>


      <lay-page v-model="flyLayPage.page"
                v-model:limit="flyLayPage.limit"
                :layout="flyLayPage.layout"
                :pages="flyLayPage.pages"
                :limits="flyLayPage.limits"
                theme="blue"
                :total=" tableUserRoleInfoData.total"
                @change="previousNextPage" style="margin-top: 15px"></lay-page>

    </div>

  </lay-container>


</template>


<script setup lang="ts" name="userRoleInfoComponent">
import {ref, onMounted} from 'vue';
import useEmployeeIdentityComposable from '@/composables/admin/EmployeeIdentityComposable';

const {
  flyLayPage,
  tableUserRoleInfoData,
  queryUserRoleInfoParams,

  /* 加载表格 */
  reloadUserRoleInfoDate,
  loadTableUserRoleInfoData,
} = useEmployeeIdentityComposable();

const showAddBtn = ref(false);


/**
 * 上一页, 下一页
 * @param current
 * @param limit
 */
const previousNextPage = ({current = 1, limit = 10}) => {
  queryUserRoleInfoParams.page = current;
  queryUserRoleInfoParams.limit = limit;
  loadTableUserRoleInfoData(queryUserRoleInfoParams);
}


/**
 * 页面初始化, 加载数据
 */
onMounted(() => {
  queryUserRoleInfoParams.deptCode = '';
  reloadUserRoleInfoDate(1, flyLayPage.limit);
})

/**
 * 分页列表展示项
 */
const userRoleInfoColumns = [
  {title: '身份名称', key: 'roleName', ellipsisTooltip: true, align: 'left'},
  {title: '所属部门', key: 'deptTitle', ellipsisTooltip: true, align: 'left'},
  {title: '登录账号', key: 'username', ellipsisTooltip: true, width: '180px', align: 'center'},
  {title: '昵称', key: 'nickName', ellipsisTooltip: true, width: '180px', align: 'center'},
  {title: '身份有效期起', key: 'startTime', ellipsisTooltip: true, width: '180px', align: 'center'},
  {title: '身份有效期止', key: 'endTime', ellipsisTooltip: true, width: '180px', align: 'center'},
  {
    title: '主身份标志 ', key: 'mainFlag', ellipsisTooltip: true, align: 'center',
    width: '150px',
    customSlot: function (obj: any) {
      return 'Y' === obj.data.mainFlag ? '是' : '否';
    }
  },
  {
    title: '有效标志 ', key: 'validFlag', ellipsisTooltip: true, align: 'center',
    width: '120px',
    customSlot: function (obj: any) {
      return 'Y' === obj.data.validFlag ? '是' : '否';
    }
  },
];


</script>


<style scoped>

</style>